<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>
  .dashboard_setup {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .dashboard_setup .setup-body {
    position: relative;
    width: 100%;
    height: 90%;
    overflow-y: auto;
  }

  .dashboard_setup .title-span {
    padding: 0px 8px;
    position: relative;
    top: -2px;
  }

  .dashboard_setup .menu-div {
    width: 100%;
    display: inline-table;
  }

  .dashboard_setup .menu-div-btn {
    text-align: right;
  }

  .dashboard_br {
    border-bottom: 1px solid #eee;
    margin-bottom: 32px;
    margin-top: 16px;
  }

  .dashboard_setup .title .div {
    padding: 17px;
    float: left;
    height: 100%;
  }

  .dashboard_setup .Button {
    margin-top: 8px;
    margin-right: 8px !important;
  }
</style>
<template>
  <div class="dashboard_setup" id="dashboard_setup">
    <div class="title table-head setup-title">
      <div class="div">我的仪表盘</div>
      <Button type="primary" class="Button" @click="save()" :loading="save_loading">保存</Button>
    </div>
    <div class="setup-body">
      <Card>
        <p slot="title">
          <Icon type="person"></Icon>
          个人应用
          <span v-if="dashboard_person_arr.length > 0">
          （<span class="title-span" v-for="el in dashboard_person_arr"
                 v-text="dashboard_person_all[el] ? dashboard_person_all[el].name : el"></span>）
        </span>
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in dashboard_person_all"
                 :key="'person_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="checked_fun_person(el.id, el.name, el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? true : false)"
              :id-name="'id_' + el.id"
              :end-val="end_val"
              :iconType="el.webRoute"
              :color="dashboard_person_arr.indexOf(el.id) > -1 ? colorObj[el.type] && colorObj[el.type][el.tag.id] ? colorObj[el.type][el.tag.id] : colorObj['other'] : '#c1c1c1'"
              :intro-text="el.name"
              :show-close="el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? false : true"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
      <Card style="margin-top: 10px;">
        <p slot="title">
          <Icon type="person"></Icon>
          部门/组织应用
          <span v-if="dashboard_department_arr.length > 0">
          （<span class="title-span" v-for="el in dashboard_department_arr"
                 v-text="dashboard_department_org_all[el] ? dashboard_department_org_all[el].name : el"></span>）
        </span>
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in dashboard_department_all"
                 :key="'department_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="checked_fun_department(el.id, el.name, dashboard_depart == true && el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? true : false)"
              :id-name="'id_' + el.id"
              :end-val="end_val"
              :iconType="el.webRoute"
              :color="dashboard_department_arr.indexOf(el.id) > -1 && dashboard_depart == true ? colorObj[el.type] && colorObj[el.type][el.tag.id] ? colorObj[el.type][el.tag.id] : colorObj['other'] : '#c1c1c1'"
              :intro-text="el.name"
              :show-close="dashboard_depart == true && el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? false : true"
            ></infor-card>
            </Col>
          </div>
          <div class="dashboard_br"></div>
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in dashboard_org_all"
                 :key="'org_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="checked_fun_department(el.id, el.name, dashboard_organ == true && el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? true : false)"
              :id-name="'id_' + el.id"
              :end-val="end_val"
              :iconType="el.webRoute"
              :color="dashboard_department_arr.indexOf(el.id) > -1 && dashboard_organ == true ? colorObj[el.type] && colorObj[el.type][el.tag.id] ? colorObj[el.type][el.tag.id] : colorObj['other'] : '#c1c1c1'"
              :intro-text="el.name"
              :show-close="dashboard_organ == true && el.function && el.function.id && permission.indexOf(el.function.id) > -1 ? false : true"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import inforCard from './components/inforCard.vue';
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {
      inforCard
    },
    data () {
      return {
        end_val: 0,
        save_loading: false,
        dashboard_depart: false,// 部门领导
        dashboard_organ: false,// 组织领导
        dashboard_person_arr: [],
        dashboard_department_arr: [],
        dashboard_person_all: {},
        dashboard_department_all: {},
        dashboard_org_all: {},
        dashboard_department_org_all: {},
        // 颜色
        colorObj: Util.constant.colorObj,
        permission: [],// 权限
      };
    },
    created: function () {
      var _this = this;
      var loginDataStr = localStorage.getItem('loginData') || '';
      if (loginDataStr != '') {
        var loginData = Util.toJson(loginDataStr);
        var permissionArr = loginData.permission || [];// 我的权限
        var permission = [];
        var dashboard_depart = false;
        var dashboard_organ = false;
        for (var k1 in permissionArr) {
          if (!permissionArr[k1]) {
            continue;
          }
          permission.push(permissionArr[k1].id);
        }
        dashboard_depart = permission.indexOf(33) > -1 ? true : false;//仪表盘部门视角
        dashboard_organ = permission.indexOf(34) > -1 ? true : false;//仪表盘组织视角
        _this.dashboard_depart = dashboard_depart;
        _this.dashboard_organ = dashboard_organ;
        _this.permission = permission;
      }
    },
    mounted () {
      var _this = this;
      _this.getSetupAll();
      _this.getSetup_person();
      _this.$nextTick(function () {
        var height = $('#dashboard_setup').height();
        var H = height - 60;
        $('#dashboard_setup .setup-body').height(H);
      });
    },
    methods: {
      // 获取所有的
      getSetupAll: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/dashboard/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data;
            var dashboard_person_all = {};
            var dashboard_department_all = {};
            var dashboard_org_all = {};
            var dashboard_department_org_all = {};
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var type = _data[k].type;
              var id = _data[k].id;
              if (!dashboard_department_org_all[id]) {
                dashboard_department_org_all[id] = {};
              }
              switch (type) {
                case 'person' :
                  if (!dashboard_person_all[id]) {
                    dashboard_person_all[id] = {};
                  }
                  dashboard_person_all[id] = _data[k];
                  break;
                case 'department' :
                  if (!dashboard_department_all[id]) {
                    dashboard_department_all[id] = {};
                  }
                  dashboard_department_all[id] = _data[k];
                  dashboard_department_org_all[id] = _data[k];
                  break;
                case 'organization' :
                  if (!dashboard_org_all[id]) {
                    dashboard_org_all[id] = {};
                  }
                  dashboard_org_all[id] = _data[k];
                  dashboard_department_org_all[id] = _data[k];
                  break;
                default :
                  break;
              }
            }
            _this.dashboard_person_all = dashboard_person_all;
            _this.dashboard_department_all = dashboard_department_all;
            _this.dashboard_org_all = dashboard_org_all;
            _this.dashboard_department_org_all = dashboard_department_org_all;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 已经设置的信息
      getSetup_person () {
        var _this = this;
        var data = {};
        var params = {
          url: '/dashboard/user/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var dashboard_person_arr = [];
            var dashboard_department_arr = [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var fid = _data[k].function.id;
              var type = _data[k].type;
              switch (type) {
                case 'person' :
                  if (_this.permission.indexOf(fid) > -1) { // 有权限
                    dashboard_person_arr.push(_data[k].id);
                  }
                  break;
                case 'department' :
                  if (_this.dashboard_depart == true && _this.permission.indexOf(fid) > -1) { // 部门领导、有权限
                    dashboard_department_arr.push(_data[k].id);
                  }
                  break;
                case 'organization' :
                  if (_this.dashboard_organ == true && _this.permission.indexOf(fid) > -1) { // 组织领导、有权限
                    dashboard_department_arr.push(_data[k].id);
                  }
                  break;
                default :
                  break;
              }
            }
            _this.dashboard_person_arr = dashboard_person_arr;
            _this.dashboard_department_arr = dashboard_department_arr;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 点击个人
      checked_fun_person: function (id, name, permission) {
        var _this = this;
        if (permission != true) { // 无权限
          return false;
        }
        var dashboard_person_arr = _this.dashboard_person_arr;
        if (dashboard_person_arr.indexOf(id) > -1) {//存在的
          for (var k in dashboard_person_arr) {
            if (!dashboard_person_arr[k]) {
              continue;
            }
            if (dashboard_person_arr[k] == id) {
              dashboard_person_arr.splice(k, 1);
            }
          }
        } else {
          if (dashboard_person_arr.length == 4) {
            _this.$Message.destroy();
            _this.$Message.error('最多只能显示4个!');
          } else {
            dashboard_person_arr.push(id);
          }
        }
        _this.dashboard_person_arr = dashboard_person_arr;
      },
      // 点击部门组织
      checked_fun_department: function (id, name, permission) {
        var _this = this;
        if (permission != true) { // 无权限
          return false;
        }
        var dashboard_department_arr = _this.dashboard_department_arr;
        if (dashboard_department_arr.indexOf(id) > -1) {//存在的
          for (var k in dashboard_department_arr) {
            if (!dashboard_department_arr[k]) {
              continue;
            }
            if (dashboard_department_arr[k] == id) {
              dashboard_department_arr.splice(k, 1);
            }
          }
        } else {
          if (dashboard_department_arr.length == 4) {
            _this.$Message.destroy();
            _this.$Message.error('最多只能显示4个!');
          } else {
            dashboard_department_arr.push(id);
          }
        }
        _this.dashboard_department_arr = dashboard_department_arr;
      },
      // 保存
      save: function () {
        var _this = this;
        var dashboard_person_arr = _this.dashboard_person_arr;
        var dashboard_department_arr = _this.dashboard_department_arr;
        var dids = [];
        dids.push(...dashboard_person_arr);
        dids.push(...dashboard_department_arr);
        _this.saveInfoAjax(dids);
      },
      // 提交数据
      saveInfoAjax (dids) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          dids: dids,
        };
        var params = {
          url: '/dashboard/user/update',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.save_loading = true;
        function _successFun(res) {
          _this.save_loading = false;
          if (res.result == 0) {
            _this.getSetup_person();
            _this.$Message.destroy();
            _this.$Message.success('保存成功!');
          } else {
            _this.$Message.destroy();
            _this.$Message.error('保存失败!');
          }
        }
      },

    }
  };
</script>
